<!DOCTYPE html>
<html lang="en" class="w-full h-full bg-[#2F3130]">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <!-- 默认引入 -->
  <link id="code-link" rel="stylesheet" href="/styles/atom-one-dark.min.css">
  <link rel="stylesheet" href="./src/scss/layout.scss">
  <style>
    table {
      border-collapse: collapse;
    }

    tr {
      border: 1px solid #fff;
    }

    th, td {
      text-align: center;
      padding: 0 10px;
      height: 40px;
      border: 1px solid #fff;
    }
  </style>
</head>
<body class="w-full h-full bg-[#2F3130]">
  <div id="app" class="w-100vw h-100vh flex-center">
    <!-- highlight-module -->
    <!-- <div class="w-full h-full pl-100px pr-50px pb-20px">
      <header class="w-full h-50px text-22px text-[#fff] font-semibold leading-50px">Demo</header>
      <div class="w-full flex" style="height: calc(100% - 50px);">
        <div class="w-2/7 h-full flex flex-col">
          <div class="language-wrap py-20px">
            <h1 class="h-35px text-16px font-semibold text-[#fff]">Language</h1>
            <select class="w-full h-40px rounded-8px bg-[#3B3E3D] text-[#fff] text-16px indent-5px" id="lang-select">
            </select>
          </div>
          <div class="theme-wrap py-20px">
            <h1 class="h-35px text-16px font-semibold text-[#fff]">Theme</h1>
            <select class="w-full h-40px rounded-8px bg-[#3B3E3D] text-[#fff] text-16px indent-5px" id="theme-select">
            </select>
          </div>
          <div class="code-wrap flex-1 flex flex-col">
            <h1 class="h-35px text-16px font-semibold text-[#fff]">Code</h1>
            <textarea
              id="code-text"
              class="w-full flex-1 text-[#fff] text-16px leading-22px bg-[#3B3E3D] p-10px rounded-8px"
              placeholder="请输入内容"
            ></textarea>
          </div>
        </div>
        <div class="w-5/7 h-full pl-15px">
          <div class="w-full h-full">
            <pre class="w-full h-full text-16px p-0px relative">
              <code class="typescript rounded-8px w-full absolute top-0 h-full" id="code-block"></code>
            </pre>
          </div>
        </div>
      </div>
    </div> -->
  
    <!-- 打印内容 -->
    <!-- <div class="w-4/5 h-full overflow-y-auto p-10px" id="scroll-wrap">
      <div id="scroll-content" class="w-full rounded-8px text-[#fff] pb-10px"></div>
    </div> -->

    <!-- 可拖曳侧边栏 -->
    <div class="w-100vw h-100vh flex">
      <div class="aside w-300px bg-blue-300"></div>
      <div style="cursor: e-resize;" class="split-line w-4px h-full bg-[#ddd]"></div>
      <div class="flex-1 text-[#fff]">
        <!-- 打印内容 -->
        <div class="w-4/5 h-full overflow-y-auto p-10px" id="scroll-wrap">
          <div id="scroll-content" class="w-full rounded-8px text-[#fff] pb-10px"></div>
        </div>
      </div>
    </div>
  </div>
  <script type="module" src="./src/main.ts"></script>
</body>
</html>